<style>
    .notselect{display: none}
    .layui-body{position: inherit !important;margin: 0 !important;padding: 0 !important;}
</style>
<div class="layui-tab layui-tab-card think-bg-white">
<div class="layui-tab-content">
    <fieldset>
        <legend>条件搜索</legend>
        <form class="layui-form layui-form-pane form-search" action="{:request()->url()}" onsubmit="return false" method="get" autocomplete="off">
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">物资编号</label>
                <div class="layui-input-inline">
                    <input name="material_code" value="{:input('material_code')}" placeholder="请输入物资编号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">物资名称</label>
                <div class="layui-input-inline">
                    <input name="material_name" value="{:input('material_name')}" placeholder="请输入物资名称" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <label class="layui-form-label">物资型号</label>
                <div class="layui-input-inline">
                    <label>
                        <input name="material_model" value="{:input('material_model')}" placeholder="请输入物资型号" class="layui-input">
                    </label>
                </div>
            </div>
            <div class="layui-form-item layui-inline">
                <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe615;</i> 搜 索</button>
            </div>
        </form>
    </fieldset>
    <div style="display: flex">
    <table class="layui-table margin-top-10" lay-skin="line" style="width: 60%;">
        {notempty name='list'}
        <thead>
        <tr>
            <th class='text-left nowrap'>配件编号</th>
            <th class='text-left nowrap'>配件名称</th>
            <th class='text-left nowrap'>型号/规格</th>
            <th class='text-left nowrap'>单位</th>
            <th class='text-left nowrap'>单价</th>
            <th class='text-left nowrap'>超市库存</th>
            <th class='text-left nowrap'>计划库存</th>
            <th class='text-left nowrap'>出库数量</th>
        </tr>
        </thead>
        {/notempty}
        <tbody>
        {foreach $list as $key=>$vo}
        <tr>
            <td class='nowrap'>
                <div class="inline-block text-top sub-span-blue">
                    <div><span>{$vo.material_code|default='--'}</span></div>
                </div>
            </td>
            <td class='nowrap'>
                <div class="inline-block text-top sub-span-blue">
                    <div><span>{$vo.material_name|default='--'}</span></div>
                </div>
            </td>
            <td class='nowrap'>
                <div class="inline-block text-top sub-span-blue">
                    <div><span>{$vo.material_model|default='--'}</span></div>
                </div>
            </td>
            <td class='nowrap'>
                <div class="inline-block text-top sub-span-blue">
                    <div><span>{$vo.material_unit|default='--'}</span></div>
                </div>
            </td>
            <td class='nowrap'>
                <div class="inline-block text-top sub-span-blue">
                    <div><span>{$vo.material_price|default='--'}</span></div>
                </div>
            </td>
            <td class='text-center'>
                <div class="inline-block text-top sub-span-blue">
                    <div><span>{$vo.surplus_num|default='0'}</span></div>
                </div>
            </td>
            <td class='text-center'>
                <div class="inline-block text-top sub-span-blue">
                    <div><span>{$vo.material_num|default='--'}</span></div>
                </div>
            </td>
            <td class='nowrap'>
                <div class="inline-block text-top sub-span-blue">
                    <div class="layui-input-inline">
                        <label>
                            <input class="layui-input ex_num" type="number" data-material_num="{$vo.material_num}" data-surplus_num="{$vo.surplus_num}" data-json="{$vo|json_encode}" name="ex_num" placeholder="输入要出库得数量">
                        </label>
                    </div>
<!--                    <button class="layui-btn layui-btn-sm">确认</button>-->
                </div>
            </td>
        </tr>
        {/foreach}
        </tbody>
    </table>
    <table class="layui-table margin-top-10" lay-skin="line" style="width: 40%;">
        <thead>
        <tr>
            <th class='text-left nowrap'>配件编号</th>
            <th class='text-left nowrap'>配件名称</th>
            <th class='text-left nowrap'>型号/规格</th>
            <th class='text-left nowrap'>出库数量</th>
            <th class='text-left nowrap'></th>
        </tr>
        </thead>
        <tbody id="caches">

        </tbody>
    </table>
    </div>
    {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
</div>
    <script>
        var userId = "{$_GET['userId']}"
        $('.ex_num').bind("input propertychange",function(){
            var ex_num = $(this).val()
            var jsonList = $(this).data('json')
            var material_num = $(this).data('material_num')
            var surplus_num = $(this).data('surplus_num')
            if(material_num - ex_num >= 0 && surplus_num - ex_num >= 0){
                jsonList.ex_num = ex_num
                jsonList.material_xjprice = Math.round(ex_num * jsonList.material_price*100)/100
                var storageList = localStorage.getItem(userId)
                
                if(!storageList || JSON.stringify(storageList).length == 0){
                    //数组转json
                    var data_list = []
                    data_list.push(jsonList)
                    localStorage.setItem(userId,JSON.stringify(data_list))
                    //页面渲染
                    // PicCallBack(data_list)
                }else{
                    var listData = JSON.parse(storageList)
                    var flag = 0
                    for (var i =0;i< listData.length;i++){
                        if(listData[i].material_code == jsonList.material_code){
                            flag = 1;
                            listData[i].ex_num = jsonList.ex_num
                        }
                    }
                    if(flag === 0){
                        listData.push(jsonList)
                    }
                    localStorage.setItem(userId,JSON.stringify(listData))
                }
            }else{
                layer.msg('库存不足', function(){
                    //关闭后的操作
                    $(this).val('0')
                    PicCallBack()
                });
            }
            PicCallBack()
        });
        // 删除按钮事件
        $(document).on('click','.editdelete',function () {
            var that = $(this)
            layer.confirm('确认删除这条数据吗？', {
                btn: ['确认','取消'] //按钮
            }, function(res){
                var index = 0
                //删除缓存
                var storageList = localStorage.getItem(userId)
                var listData = JSON.parse(storageList)
                for (var i =0;i< listData.length;i++){
                    if(listData[i].id == that.data('id')){
                        index = i
                    }
                }
                listData.splice(index,1);
                localStorage.setItem(userId,JSON.stringify(listData))
                that.parents('tr').remove();
                layer.close(res)
            }, function(){

            });


        })

        //渲染数据
        function PicCallBack(){
            var data = JSON.parse(localStorage.getItem(userId))
            console.log(data)
            var html = ''
            //渲染数据
            for (var i = 0; i < data.length;i++) {
                html +="<tr>\n" +
                    "            <td class='nowrap'>\n" +
                    "                <div class=\"inline-block text-top sub-span-blue\">\n" +
                    "                    <div><span>"+data[i].material_code+"</span></div>\n" +
                    "                </div>\n" +
                    "            </td>\n" +
                    "            <td class='nowrap'>\n" +
                    "                <div class=\"inline-block text-top sub-span-blue\">\n" +
                    "                    <div><span>"+data[i].material_name+"</span></div>\n" +
                    "                </div>\n" +
                    "            </td>\n" +
                    "            <td class='nowrap'>\n" +
                    "                <div class=\"inline-block text-top sub-span-blue\">\n" +
                    "                    <div><span>"+data[i].material_model+"</span></div>\n" +
                    "                </div>\n" +
                    "            </td>\n" +
                    "            <td class='nowrap'>\n" +
                    "                <div class=\"inline-block text-top sub-span-blue\">\n" +
                    "                    <div class=\"layui-input-inline\">\n" +
                                            +data[i].ex_num+
                    "                    </div>\n" +
                    "                </div>\n" +
                    "            </td>\n" +
                    "            <td class='nowrap'>\n" +
                    "                <div class=\"inline-block text-top sub-span-blue\">\n" +
                    "                    <button class=\"layui-btn layui-btn-sm layui-btn-danger editdelete\" data-id="+data[i].id+">删除</button>\n" +
                    "                </div>\n" +
                    "            </td>\n" +
                    "        </tr>"
            }
            $("#caches").html(html)
            form.render();
        }
        $(document).ready(function(){
            PicCallBack()
        });
    </script>
</div>
<script>form.render()</script>